import React, {Component} from 'react'

import {View} from '@tarojs/components'
import {AtTabs, AtTabsPane} from 'taro-ui'
import NoticeList from '../components/notice-list/index'

import './index.scss'
import {getAnnounce} from "../../service/announce";
import {showToast} from "../../utils/common";


type PageStateProps = {}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  current: number,
  announceList: {
    announce: []
    notice: []
    teach: []
  },
  newsList: {
    news: [],
    notice: []
  }
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface DetailNotice {
  props: IProps;
}

class DetailNotice extends Component<IProps, PageState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      current: 0,
      announceList: {
        announce: [],
        notice: [],
        teach: []
      },
      newsList: {
        news: [],
        notice: []
      }
    }
  }

  componentDidMount() {
    this.onLoadData()
  }

  onLoadData() {
    this.loadGetAnnounceList()
  }

  handleClickChangeAtTabs = (value) => {
    this.setState({
      current: value
    })
  }
  loadGetAnnounceList = async () => {
    const {data} = await getAnnounce()
    if (!data) return showToast('获取通知公告失败！')
    console.log(data);
    this.setState({
      announceList: {
        teach: data.announceList.teach,
        announce: data.announceList.announce,
        notice: data.announceList.notice
      },
      newsList: {
        news: data.newsList.news,
        notice: data.newsList.notice
      }
    })
  }

  render() {
    const tabList = [{title: '教学讯息'}, {title: '教务通知'}, {title: '教务公告'}, {title: '学校要闻'}, {title: '校通知公告'}]
    const {announceList, newsList} = this.state
    return (
      <View className='detail_notice'>
        <AtTabs
          current={this.state.current}
          tabList={tabList}
          scroll
          onClick={this.handleClickChangeAtTabs}
        >
          <AtTabsPane current={this.state.current} index={0}>
            <NoticeList List={announceList.teach} />
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <NoticeList List={announceList.announce} />
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2}>
            <NoticeList List={announceList.notice} />
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={3}>
            <NoticeList List={newsList.news} />
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={4}>
            <NoticeList List={newsList.notice} />
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}

export default DetailNotice
